<script setup>
import Navbar from "@/components/Navbar.vue";
</script>
<template>
  <div class="oj-main-layout flex-col">
    <div class="oj-main-layout-header">
      <div class="oj-main-layout-nav">
        <Navbar></Navbar>
      </div>
    </div>
    <div v-if="$route.meta.showBanner" class="banner-container justify-center">
      <img src="@/assets/images/log-banner.png" class="banner-img" />
    </div>
    <div class="content-container flex-row justify-center">
      <RouterView />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.oj-main-layout {
  min-height: 100vh;
  background-color: #f5f7f9;

  .banner-container {
    width: 100%;
    padding: 20px;
    padding-top: 80px;
  }

  .banner-img {
    max-width: 1520px;
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
  }

  .content-container {
    width: 100%;
    padding: 80px 20px 20px 20px; // 添加顶部80px的内边距，为固定导航栏预留空间
    flex: 1;
  }

  .oj-main-layout-header {
    height: 60px;
    position: fixed;
    width: 100%;
    background: #fff;
    left: 0;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }

  .oj-main-layout-nav {
    max-width: 1520px;
    width: 100%;
    margin: 0 auto;
    height: 60px;
    background: #fff;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .oj-main-layout {
    .banner-container {
      padding-top: 70px;
    }

    .content-container {
      padding: 70px 10px 10px 10px; // 调整小屏幕下的内边距
    }
  }
}
</style>
